<template>
  <!-- 播放器-->
  <!-- <ve-video v-if="url" id="video" object-fit="cover" mode="portrait" controls="native" :showFullscreenBtn="false
    " :autoplay="true" :src="url" @ended="handleEnded" @play="handlePlay" @pause="handlePause"></ve-video> -->

    <view style="width:100%;height: 100%;">
      <video-player 
        v-if="playerStatus && videoInfo.album_id && videoInfo.dy_media_id && !isDestory"
        :id="`video_${idx}`" 
        object-fit="cover" 
        style="pointer-events:auto;width:100%;height: 100%;"
        version='1'
        :autoplay="true"
        :showFullscreenBtn="false" 
        :controls="true"
        :album-id="videoInfo.album_id + ''" 
        :episode-id="videoInfo.dy_media_id + ''"
        :show-bottom-progress="true"
        :enable-progress-gesture="false"
        :enable-play-gesture="true"
        :vslide-gesture="false"
        :cloud-type="1"

        @getsource="getsourceway"
        @ended="handleEnded" 
        @play="handlePlay" 
        @pause="handlePause"
        @error="handleError"
        >
        <view style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 95%;
            "
          @tap="handleTap"
        ></view>
      </video-player>
   

      <video 
        v-if="!playerStatus && url && !isDestory"
        :id="`video_${idx}`" 
        class="video"
        object-fit="cover" 
        style="pointer-events: auto !important;"
        :src="url"
        controls
        :autoplay="true"
        :showFullscreenBtn="false" 
        :enable-progress-gesture="false"
        :enable-play-gesture="true"
        :vslide-gesture="false"
        @ended="handleEnded"
        @play="handlePlay"
        @pause="handlePause"
      >
        <view class="thumb-cover"
          @tap="handleTap"
        ></view>
      </video>

    </view>
    
</template>

<script>
import store from '@/store/index'

let timer = null;
export default {
  props: {
    url: '',
    idx: {
      type: Number,
    },
    sort: {
      type: Number,
      required: true
    },
    videoInfo: {
      type: Object
    }
  },
  data() {
    return {
      episodeInfo: {},
      playerStatus: store.state.global.playerStatus,
      IsPlay: true,
      player: null,
      isDestory: true,
    }
  },
  created() {
    // this.playerStatus = tt.canIUse('video-player')

    this.isDestory = false;
    timer = setTimeout(() => {
      this.player = tt.createVideoContext(`video_${this.idx}`, this.playerStatus ? undefined : this)
      console.log("player", this.player)

      timer && clearTimeout(timer)
      timer = null
    }, 100)
    console.log("playerStatus && videoInfo.album_id && videoInfo.dy_media_id && !isDestory",
      this.playerStatus , this.videoInfo.album_id , this.videoInfo.dy_media_id , !this.isDestory
    );
    
  },
  onLoad(){
  },
  beforeDestroy(){
    this.isDestory = true;
    this.player?.pause()
    this.player?.stop()
    
    timer && clearTimeout(timer)
    timer = null
  },
  destroyed(){
    // this.playerStatus = tt.canIUse('video-player')

    const player = tt.createVideoContext(`video_${this.idx}`, this.playerStatus ? undefined : this)
    this.player?.pause()
    player?.stop()
  },
  methods: {
    handleError(...err){
      console.log("错误", err);
    },

    getsourceway(){
      console.log("🚀 ~ getsourceway ~ getsourceway:")
      this.player = tt.createVideoContext(`video_${this.idx}`, this.playerStatus ? undefined : this)
      timer && clearTimeout(timer)
      timer = null
      
      this.player.play()

      // this.video = tt.preloadResourceVideo({
      //   albumId: "7432940987757888034",
      //   episodeId: "7432971929219924489",
      //   cloudType: 1,
      //   version: 1,
      //   success: () => {
      //     console.log('短剧预加载成功')
      //   },
      //   fail: (error) => {
      //     console.log('短剧预加载失败' + JSON.stringify(error))
      //   },
      // });
      // this.video = tt.createVideoContext('video', this);
      // this.video.play()
    },
    handleTap(){
      this.IsPlay = !this.IsPlay
      if(this.IsPlay){
        this.player.play()
        this.player.exitFullScreen()
      } else {
        this.player.pause()
      }
    },
    // 开始播放视频
    handlePlay() {
      this.IsPlay = true
    },
    // 视频暂停
    handlePause() {
      this.IsPlay = false
    },
    // 播放结束后进入下一集
    handleEnded() {
      console.log("🚀 ~ handleEnded ~ handleEnded:")
      const showPayText = null
      // // 向父组件派发时间,重新获取短剧信息
      this.$emit('updateEpisodeInfo', this.sort + 1, showPayText)
    },
  },
}
</script>
<style lang="scss" scoped>
  .video{
    position: relative;
    width: 100%;
    height: 100%;

    .thumb-cover{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 95%;
    }
  }
</style>
